<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Clothes Wars</title>
    <script src="js/bonus.js"></script>
    <script src="js/timer2.js"></script>
    <script src="js/snake.js"></script>
    <script src="js/bonus.js"></script>
    <script src="js/game.js"></script>
    <script src="js/engine.js"></script>
    <script src="js/timer.js"></script>
    <style>
      body {
        text-align: center;
        background: #fff;
      }
      canvas {
        margin: auto;
        border: solid 1px gray;
        background: #abcdef;
      }
    </style>
  </head>
  <body>
    <div style="display: none">
      <img src="img/start.png" id="start"/>
      <img src="img/end.png" id="end"/>
      <img src="img/win.png" id="win"/>
      <img src="img/bg.png" id="bg"/>
      <img src="img/p1.png" id="p1"/>
      <img src="img/p2.png" id="p2"/>
      <img src="img/c1.png" id="c11"/>
      <img src="img/c2.png" id="c12"/>
      <img src="img/c3.png" id="c13"/>
      <img src="img/c4.png" id="c14"/>
      <img src="img/d1.png" id="c21"/>
      <img src="img/d2.png" id="c22"/>
      <img src="img/d3.png" id="c23"/>
      <img src="img/d4.png" id="c24"/>
      <img src="img/logo.png" id="pflogo"/>
    </div>
    <canvas id="canvas" width="800" height="640"></canvas>
    <script>GameEngine.load(SnakeWarsGame);</script>
    <div>Player 1: press A W S D to control</div>
    <div>Player 2: press arrow keys to control</div>
  </body>
</html>